<script setup>
import { ref, onMounted, watch, onUnmounted } from 'vue'
import { useAirStore } from '@/stores'
import { storeToRefs } from 'pinia'
import { addHangxian, clear } from '../../js/sightsee'

const airStore = useAirStore()
const { operationData } = storeToRefs(airStore)
const leftNum = ref(0)
const rightNum = ref(0)

const setData = (val) => {
  leftNum.value = val?.aircraftNumber
  rightNum.value = val?.lineNumber
}

const isshowhangxian = ref(false)
const addhangxian = () => {
  if (!isshowhangxian.value) {
    addHangxian(1)
    isshowhangxian.value = true
  } else {
    clear()
    isshowhangxian.value = false
  }
}

onUnmounted(() => {
  clear()
})

onMounted(() => {
  setData(operationData.value)
})

watch(operationData, (newVal) => {
  setData(newVal)
})
</script>
<template>
  <div class="card">
    <div class="left">
      <span>飞行器数量</span>
      <span><NumberAnimate :count="leftNum" /><i>/架次</i></span>
    </div>
    <!-- rightNum -->
    <div class="right" @click="addhangxian">
      <span>运营航线数量</span>
      <span><NumberAnimate :count="7" /><i>/条</i></span>
    </div>
  </div>
</template>
<style scoped lang="scss">
.card {
  padding: 2px 15px 10px;
  display: flex;
  justify-content: space-between;
  .left {
    width: calc(50% - 15px);
    display: flex;
    flex-direction: column;
    background: url('@img/operation/fly-num.png');
    padding: 10px 0 10px 15px;
    > span:first-child {
      font-family: YouSheBiaoTiHei;
      font-size: 20px;
      color: #00d5ff;
      line-height: 26px;
      text-align: left;
      font-style: normal;
    }
    > span:last-child {
      font-family: DINAlternate, DINAlternate;
      font-size: 23px;
      color: #ffffff;
      line-height: 23px;
      text-align: left;
      font-style: normal;
      margin-top: 5px;
      i {
        font-weight: normal;
        font-style: normal;
        color: #2f9cff;
        margin-left: 5px;
        font-size: 16px;
      }
    }
  }
  .right {
    width: calc(50%);
    display: flex;
    flex-direction: column;
    background: url('@img/operation/fly-num.png');
    padding: 10px 0 10px 15px;
    cursor: pointer;
    > span:first-child {
      font-family: YouSheBiaoTiHei;
      font-size: 20px;
      color: #00d5ff;
      line-height: 26px;
      text-align: left;
      font-style: normal;
    }
    > span:last-child {
      font-family: DINAlternate, DINAlternate;
      font-size: 23px;
      color: #ffffff;
      line-height: 23px;
      text-align: left;
      font-style: normal;
      margin-top: 5px;
      i {
        font-weight: normal;
        font-style: normal;
        color: #2f9cff;
        margin-left: 5px;
        font-size: 16px;
      }
    }
  }
}
</style>
